<!-- Bread crumb is created dynamically -->
<!-- row -->
<div class="row">

    <!-- col -->
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark">
            <!-- PAGE HEADER --><i class="fa-fw fa fa-file-o"></i> Forum Layout <span>
                >
                Topic View
            </span>
        </h1>
    </div>
    <!-- end col -->

    <!-- right side of the page with the sparkline graphs -->
    <!-- col -->
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <!-- sparks -->
        <ul id="sparks">
            <li class="sparks-info">
                <h5> My Income <span class="txt-color-blue">$47,171</span></h5>
                <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                    1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
                <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
                <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
        </ul>
        <!-- end sparks -->
    </div>
    <!-- end col -->

</div>
<!-- end row -->

<!-- row -->
<div class="row">

<div class="col-sm-12">

<div class="well">

<table class="table table-striped table-forum">
<thead>
<tr>
    <th colspan="2"><a href="#ajax/forum.html"> Projects </a> > Business Requirement Docs</th>
    <th class="text-center hidden-xs hidden-sm" style="width: 100px;">Topics</th>
    <th class="text-center hidden-xs hidden-sm" style="width: 100px;">Posts</th>
    <th class="hidden-xs hidden-sm" style="width: 200px;">Last Post</th>
</tr>
</thead>
<tbody>

<!-- TR -->
<tr class="warning">
    <td class="text-center" style="width: 40px;">
        <i class="glyphicon glyphicon-pushpin fa-2x text-danger"></i>
    </td>
    <td>
        <h4>
            <a href="#ajax/forum-post.html">
                Welcome message
            </a>
            <small><a href="#ajax/profile.html">John Doe</a> on <em>January 1, 2014</em></small>
        </h4>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">431</a>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">1342</a>
    </td>
    <td class="hidden-xs hidden-sm">
        by
        <a href="javascript:void(0);">John Doe</a>
        <br>
        <small>
            <i>January 1, 2014</i>
        </small>
    </td>
</tr>
<!-- end TR -->

<!-- TR -->
<tr class="warning">
    <td class="text-center" style="width: 40px;">
        <i class="glyphicon glyphicon-pushpin fa-2x text-danger"></i>
    </td>
    <td>
        <h4>
            <a href="#ajax/forum-post.html">
                Latest Updates
            </a>
            <small><a href="#ajax/profile.html">John Doe</a> on <em>January 1, 2014</em></small>
        </h4>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">431</a>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">1342</a>
    </td>
    <td class="hidden-xs hidden-sm">
        by
        <a href="javascript:void(0);">John Doe</a>
        <br>
        <small>
            <i>January 1, 2014</i>
        </small>
    </td>
</tr>
<!-- end TR -->

<!-- TR -->
<tr>
    <td colspan="2">
        <h4>
            <a href="#ajax/forum-post.html">
                Nam quam nunc blandit vel
            </a>
            <small><a href="#ajax/profile.html">John Doe</a> on <em>January 1, 2014</em></small>
        </h4>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">431</a>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">1342</a>
    </td>
    <td class="hidden-xs hidden-sm">
        by
        <a href="javascript:void(0);">John Doe</a>
        <br>
        <small>
            <i>January 1, 2014</i>
        </small>
    </td>
</tr>
<!-- end TR -->

<!-- TR -->
<tr>
    <td colspan="2">
        <h4>
            <a href="#ajax/forum-post.html">
                Maecenas nec odio et ante tincidun
            </a>
            <small><a href="#ajax/profile.html">John Doe</a> on <em>January 1, 2014</em></small>
        </h4>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">431</a>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">1342</a>
    </td>
    <td class="hidden-xs hidden-sm">
        by
        <a href="javascript:void(0);">John Doe</a>
        <br>
        <small>
            <i>January 1, 2014</i>
        </small>
    </td>
</tr>
<!-- end TR -->

<!-- TR -->
<tr>
    <td colspan="2">
        <h4>
            <a href="#ajax/forum-post.html">
                Donec sodales sagittis magna
            </a>
            <small><a href="#ajax/profile.html">John Doe</a> on <em>January 1, 2014</em></small>
        </h4>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">431</a>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">1342</a>
    </td>
    <td class="hidden-xs hidden-sm">
        by
        <a href="javascript:void(0);">John Doe</a>
        <br>
        <small>
            <i>January 1, 2014</i>
        </small>
    </td>
</tr>
<!-- end TR -->

<!-- TR -->
<tr>
    <td colspan="2">
        <h4>
            <a href="#ajax/forum-post.html">
                Sed consequat, leo eget bibendum sodales
            </a>
            <small><a href="#ajax/profile.html">John Doe</a> on <em>January 1, 2014</em></small>
        </h4>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">431</a>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">1342</a>
    </td>
    <td class="hidden-xs hidden-sm">
        by
        <a href="javascript:void(0);">John Doe</a>
        <br>
        <small>
            <i>January 1, 2014</i>
        </small>
    </td>
</tr>
<!-- end TR -->

<!-- TR -->
<tr>
    <td colspan="2">
        <h4>
            <a href="#ajax/forum-post.html">
                Consectetuer adipiscing elit
            </a>
            <small><a href="#ajax/profile.html">John Doe</a> on <em>January 1, 2014</em></small>
        </h4>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">431</a>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">1342</a>
    </td>
    <td class="hidden-xs hidden-sm">
        by
        <a href="javascript:void(0);">John Doe</a>
        <br>
        <small>
            <i>January 1, 2014</i>
        </small>
    </td>
</tr>
<!-- end TR -->

<!-- TR -->
<tr class="locked">
    <td colspan="2">
        <h4>
            <a href="#ajax/forum-post.html">
                This is a locked topic!
            </a>
            <small><a href="#ajax/profile.html">John Doe</a> on <em>January 1, 2014</em></small>
        </h4>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">431</a>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">1342</a>
    </td>
    <td class="hidden-xs hidden-sm">
        by
        <a href="javascript:void(0);">John Doe</a>
        <br>
        <small>
            <i>January 1, 2014</i>
        </small>
    </td>
</tr>
<!-- end TR -->

<!-- TR -->
<tr class="closed">
    <td colspan="2">
        <h4>
            <a href="#ajax/forum-post.html">
                This is a closed topic!
            </a>
            <small><a href="javascript:void(0);">John Doe</a> on <em>January 1, 2014</em></small>
        </h4>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">431</a>
    </td>
    <td class="text-center hidden-xs hidden-sm">
        <a href="javascript:void(0);">1342</a>
    </td>
    <td class="hidden-xs hidden-sm">
        by
        <a href="javascript:void(0);">John Doe</a>
        <br>
        <small>
            <i>January 1, 2014</i>
        </small>
    </td>
</tr>
<!-- end TR -->

</tbody>
</table>

<div class="text-center">
    <ul class="pagination pagination-sm">
        <li class="disabled">
            <a href="javascript:void(0);">Prev</a>
        </li>
        <li class="active">
            <a href="javascript:void(0);">1</a>
        </li>
        <li>
            <a href="javascript:void(0);">2</a>
        </li>
        <li>
            <a href="javascript:void(0);">3</a>
        </li>
        <li>
            <a href="javascript:void(0);">...</a>
        </li>
        <li>
            <a href="javascript:void(0);">99</a>
        </li>
        <li>
            <a href="javascript:void(0);">Next</a>
        </li>
    </ul>
</div>

</div>
</div>

</div>

<!-- end row -->

<!-- row -->

<div class="row">

    <!-- a blank row to get started -->

</div>

<!-- end row -->
@section Scripts {
    <script type="text/javascript">
        /* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

        pageSetUp();

        /*
         * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
         * eg alert("my home function");
         */

        // pagefunction

        var pagefunction = function() {

        };

        // end pagefunction

        // run pagefunction on load

        pagefunction();

    </script>
}
